<template>
  <div class="login">
    <cu-nav centerText="账户登录" colorIcon="#fff" colorText="#fff" background="#e8443d"></cu-nav>
    <van-field
      v-model="mobile"
      type="tel"
      label="账户"
      placeholder="请输入手机号"
      size="large"
      @blur="validate"
      :error-message="mobileValidate ? '手机号格式错误' : ''"
    />
    <van-field
      v-model="password"
      type="password"
      name="password"
      label="密码"
      v-validate="'required'"
    />
    <div class="tools">
      <van-radio-group v-model="rememberMe" checked-color="#e8443d" @change="change">
        <van-radio name="1" shape="round" checked-color="#e8443d">记住我</van-radio>
      </van-radio-group>
      <div class="forget-password">忘记密码?</div>
    </div>
    <div class="btn">
      <van-button
        :loading="isLogining"
        loading-type="spinner"
        type="primary"
        size="large"
        color="#e8443d"
        style="margin-bottom:10px;"
        @click="loginSubmit"
      >登 录</van-button>
      <van-button type="primary" size="large" color="#dddddd">注 册</van-button>
    </div>
  </div>
</template>

<script>
import CuNav from "@/components/custom-model/cu-nav";

import Vue from "vue";
import { Field, RadioGroup, Radio, Button, Toast, Notify } from "vant";
import { mobileReg, emailReg } from "@/utils/regexp";
// import { USER_LOGIN, USER_INFO } from "@/api/user";
import { setLocalStorage } from "@/utils/local-storage";
import emitUtil from "@/utils/emitUtil";

// import { CHILD_MY } from "@/api/family";
import { mapMutations } from "vuex";

Vue.use(Field)
  .use(RadioGroup)
  .use(Radio)
  .use(Notify)
  .use(Button);

export default {
  components: {
    "cu-nav": CuNav
  },
  data() {
    return {
      mobile: "",
      password: "",
      rememberMe: 1, // 默认1，选中
      isLogining: false,
      mobileValidate: false
    };
  },
  methods: {
    change(e) {
      // console.log(this.rememberMe);
    },
    async loginSubmit() {
      this.isLogining = true;
      try {
        await this.validate();
        if (!this.mobileValidate) {
          await this.login();
          this.routerRedirect();
        }
        this.isLogining = false;
      } catch (err) {
        this.isLogining = false;
      }
    },
    async validate() {
      this.mobileValidate = false;
      if (!mobileReg.test(this.mobile)) {
        this.mobileValidate = true;
      }
    },

    async login() {
      const loginData = this.getLoginData();
      let headers = {
        "Content-Type": "multipart/form-data;"
      };
      const { data } = await this.$post(USER_LOGIN, loginData, headers);

      if (!data.status) {
        Notify({ type: "warning", message: data.info });
        return;
      }
      // 设置token过期时间
      let date = new Date();
      let expireTime = 24 * 3600 * 1000; // 过期时间为一天

      setLocalStorage({
        token: data.access_token,
        expireTime: date.getTime() + expireTime
      });
      // 更新孩子信息
      this._setChildInfoList();
      // 更新个人信息
      this._getUserInfo();
    },
    getLoginData() {
      let formData = new FormData();
      formData.append("mobile", this.mobile);
      formData.append("password", this.password);
      formData.append("rememberMe", this.rememberMe);
      return formData;
    },
    getUserType(account) {
      const accountType = mobileReg.test(account)
        ? "mobile"
        : emailReg.test(account)
        ? "email"
        : "username";
      return accountType;
    },
    routerRedirect() {
      const { query } = this.$route;
      this.$router.replace({
        name: query.redirect || "index",
        query: query
      });
    },
    async _setChildInfoList() {
      let { data } = await this.$get(CHILD_MY);
      if (data.status === 1 && data.totalCount !== 0) {
        this.setChildInfoList(data.data);
      }
    },
    async _getUserInfo() {
      let { data } = await this.$get(USER_INFO);
      if (data.code === 200 && data.data && data.data.id) {
        this.setUserInfo(data.data);
      }
    },
    ...mapMutations({
      setChildInfoList: "setChildInfoList",
      setUserInfo: "setUserInfo"
    })
  }
};
</script>

<style scope lang="less">
.login {
  width: 100%;
  height: 100vh;
  background: #fff;
}
.tools {
  width: 100%;
  padding: 10px 10px;
  display: flex;
  justify-content: space-between;
  color: #9f9fa0;
  margin-bottom: 20px;
}
.forget-password {
  width: 100px;
  text-align: right;
  font-size: 14px;
  //   color: #9f9fa0;
}

.van-radio__label {
  color: #9f9fa0;
}

.btn {
  width: 100%;
  height: auto;
  padding: 0px 10px;
  .login-btn {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    text-align: center;
    color: #fff;
    background: #e8443d;
    border-radius: 4px;
    margin-bottom: 10px;
  }
  .register-btn {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    text-align: center;
    color: #4b4848;
    background: #ddd;
    border-radius: 4px;
  }
}

.van-field__label {
  width: 60px;
}
</style>

